<template>
    <div>
        <div v-if="!article">
            <div v-for="i in 5" :key="i">
                <el-skeleton style="--el-skeleton-circle-size: 100px">
                </el-skeleton>
            </div>
        </div>
        <div v-if="!photo[0]">
            <div v-for="i in 5" :key="i">
                <el-skeleton style="--el-skeleton-circle-size: 100px">
                </el-skeleton>
            </div>
        </div>
        <div>
            <div style="width: 100%;height: 190px;margin-bottom: 25px;">
                <div v-if="photo[0]" style="width: 100%;">
                    <router-link :to="{ name: 'article', query: { id: photo[0] ? photo[0].id : 1 } }" class="imgtitle">
                        <el-image :src="photo[0].face" :fit="fit" style="height: 190px;width: 100%;" />
                        <div style="position: relative;top: -4px;background-color: rgb(245,247,250);">
                            {{ photo[0].title }}
                        </div>
                    </router-link>
                </div>

            </div>
            <div v-for="i in article" :key="i.id" class="title">
                <router-link :to="{ name: 'article', query: { id: i.id } }" class="article">
                    {{ i.title }}</router-link>
                <el-divider border-style="dashed" />
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name: "articleHomeShowComponents2Class.vue",
    props: {
        article: {
            type: Object,

        },
        photo: {//图片
            type: Object,

        },
    },
    setup() {
        return {

        }
    }
}

</script>

<style scoped>
.title {
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article {
    text-decoration: none;
    color: black;
}

.article:visited {
    text-decoration: none;
    color: black;
}

.article:hover {
    text-decoration: none;
    color: red;
}



.el-divider--horizontal {
    margin: 15px 0;
}

.imgtitle {
    text-decoration: none;
    color: black;
    position: relative;
    top: -6px;
    background-color: rgb(238, 238, 238);
    text-align: center;
    white-space: nowrap;
    /* 禁止换行 */
    overflow: hidden;
    /* 隐藏超出部分 */
    text-overflow: ellipsis;
    /* 显示省略号 */
}

.imgtitle :visited {
    text-decoration: none;
    color: black;
}

.imgtitle :hover {
    text-decoration: none;
    color: red;
}
</style>